import React from 'react';
import BaseScreen from "../BaseScreen";
import styles from "../../css/my.module.css"
import { msgUnread } from '../../service/newsService'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import { navigateTo, locationTo } from '../../utils/LocationUtil'
import { myNav, Common ,NewsImg} from "../../const/imgs";
import * as locations from "../../const/locations";
import { getTOKEN, setInfo } from '../../utils/StorageUtil';
import ProgressView from "../../view/ProgressView";
class News extends BaseScreen {
  constructor(props) {
    super(props);
    this.state = {
      navigateList:[],
      loading:false
    }
  }
  componentDidMount() {
    document.title = '消息'
    this.setState({loading:true})
    msgUnread({
      token:getTOKEN()
    })
    .then(
      res => {
    this.setState({loading:false})
    if(res.error_code ===0){
          const data = res.data
          for(let i = 0; i < data.length; i++){
            switch(data[i].type){
              case 1:
              NAVIGATORLIST[0].unread_num = data[i].unread_num;
              break;
              case 2:
              NAVIGATORLIST[1].unread_num = data[i].unread_num;
              break;
              case 3:
              NAVIGATORLIST[2].unread_num = data[i].unread_num;
              break;
            }
          }
          this.setState({
            navigateList:NAVIGATORLIST
          })
        }
      }
    )
    .catch(
      err => {
        console.log(err)
      }
    )
  }
  navigate = (e) => {
    this.props.selectItem({ type: e })
    setInfo('newsType',e)
    locationTo(locations.TaskNews)
    
  }
  render() {
    console.log(this.state.navigateList)
    return (
      <div className={styles.homes}
        style={{
          boxSizing: 'border-box',
          paddingTop: '10px',
        }}
      >
        <div className={styles["wrapper"]}>
          <ul>
            {this.state.navigateList.map((item, index) => (
              <Navlistone
                key={index}
                name={item.name}
                imgurl={item.imgurl}
                path={item.path}
                des={item.des}
                unread_num={item.unread_num}
                type={item.type}
                navigate={this.navigate}
                index={index}
              />
            ))}
          </ul>
        </div>
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />
      </div>
    )
  }
}
const Navlistone = ({ index, name, imgurl, path, des, unread_num,type,navigate }) => {

  return (
    <li style={style.navListOne} onClick={() => {navigate(type) }}>
      <div >
        <img style={style.nav_list_one_icon} src={imgurl}  />
      </div>
      <div style={style.nav_list_one_info}>
        <div style={style.nav_list_one_l}>
          <div style={style.nav_list_one_name}>
            {name}
          </div>
         {parseInt(unread_num) === 0 && <div  style={style.nav_list_one_des}>
            {parseInt(index)===0&&'暂无消息通知'}
            {parseInt(index)===1&&'暂无任务消息通知'}
            {parseInt(index)===2&&'暂无考勤消息通知'}
          </div>}
          {parseInt(unread_num) >0 && <div  style={style.nav_list_one_des}>
            des
          </div>}
        </div>
        <div style={style.nav_list_one_r}>
          {parseInt(unread_num)!==0&&<div  style={style.nav_list_one_circle}>
            {unread_num}
          </div>}
          <img src={Common.YJT}  style={style.nav_list_one_y} />
        </div>
      </div>
    </li>
  );
}

const style = {
  navListOne:{
    height: '60px',
    background: '#ffffff',
    padding: '0 3%',
    display: 'flex',
    alignItems: 'center',
    borderBottom: '0.5px solid #dddddd',
  },
  nav_list_one_icon:{
    display:'block',
    height: '40px',
    width:'auto',
    marginRight:'10px',
  },
  nav_list_one_info:{
    flex:1,
    background: '#ffffff',
    display: 'flex',
    justifyContent:'space-between',
  },
  nav_list_one_name:{
    fontSize:'16px',
  },
  nav_list_one_des:{
    fontSize:'12px',
    color:'#939294',
  },
  nav_list_one_l:{
    background: '#ffffff',
    display: 'flex',
    flexDirection:'column',
    justifyContent:'center',
    
  },
  nav_list_one_r:{
    background: '#ffffff',
    display: 'flex',
    alignItems:'center'

  },
  nav_list_one_circle:{
    height:'18px',
    lineHeight:'18px',    
    padding:'0 6px',
    borderRadius:'10px',
    background:'#f63435',
    color:'#ffffff',
    fontSize:'12px',
  },
  nav_list_one_y:{
    height:'14px',
    width:'auto',
    marginLeft:'5px'
  }
}

const NAVIGATORLIST = [
  {
    id: 5,
    name: "公告",
    imgurl: NewsImg.GG,
    path: locations.TaskNews,
    des:'点击查看更多公告',
    unread_num:0,
    type:1
  }, {
    id: 5,
    name: "任务提醒",
    imgurl: NewsImg.RWTX,
    path: locations.TaskNews,
    des:'点击查看更多任务提醒',
    unread_num:0,
    type:2
  },{
    id: 5,
    name: "考勤消息",
    imgurl: NewsImg.KQXX,
    path:locations.TaskNews,
    des:'点击查看更多考勤消息',
    unread_num:0,
    type:3
  },
]
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    selectItem(item) {
      let params = {
        problemId: item.id,
      };
      dispatch(Actions.actionSelectProblem(params));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(News);